import React, {Component} from "react";
import {Button, Descriptions, Icon, Input, Modal, Table} from "antd";

import './style.css'
import Text from "antd/es/typography/Text";
import Title from "antd/es/typography/Title";
import {inject, observer} from "mobx-react";

const {Search} = Input;
// import Search from "antd/es/input/Search";

const machines = [
    {
        id: 1,
        ip: '139.199.75.187',
        memory: '2000MB',
        status: 1,
    },
    {
        id: 2,
        ip: '139.199.75.187',
        memory: '2000MB',
        status: 1,
    }
];

const users = [
    {
        id: '1',
        username: 'moyrn',
        // password: 'fjiosjfeiosjfiojeoiq',
        authorization: 0,
        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
        nickname: 'moyrn',
        phone: '13875902222',
        status: 1
    },
    {
        id: '2',
        username: 'moyrn',
        // password: 'fjiosjfeiosjfiojeoiq',
        authorization: 0,
        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
        nickname: 'moyrn',
        phone: '13875902222',
        status: 1
    }
];

export default @inject('store') @observer
class MachineManager extends Component {
    columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: 'IP',
            dataIndex: 'ip',
            key: 'ip'
        },
        {
            title: 'CPU',
            dataIndex: 'cpu',
            key: 'cpu'
        },
        {
            title: 'Memory',
            dataIndex: 'memory',
            key: 'memory'
        },
        {
            title: '流量',
            dataIndex: 'bandwidth',
            key: 'bandwidth'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text) => {
                switch (text) {
                    case 1:
                        return <Text>运行中</Text>;
                    case 2:
                        return <Text type={"warning"}>暂停</Text>;
                    case 3:
                        return <Text type={"danger"}>已停止</Text>;
                    default:
                }
            }
        },
        {
            title: '操作',
            render: (item) => (
                <Button
                    type={"primary"}
                    onClick={() => this.setMachine(item)}
                >分配</Button>
            )
            // render: (text,item) => (this.setMachine(item))
        },
    ];

    modalColumns = [
        {
            title: 'UserID',
            dataIndex: 'user_id',
            key: 'user_id'
        },
        {
            title: '用户名',
            dataIndex: 'user.username',
            key: 'username'
        },
        {
            title: 'MachineID',
            dataIndex: 'machine_id',
            key: 'machine_id'
        },
        {
            title: 'MachineIP',
            dataIndex: 'machine.ip',
            key: 'ip'
        },
        {
            title: '权限',
            dataIndex: 'authorization',
            key: 'authorization'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text, item) => {
                switch (text) {
                    case 1:
                        return <div>
                            <Text>已启用</Text>
                            <Button
                                className='status-button'
                                size={"small"}
                                type={"danger"}
                                onClick={() => {
                                }}
                            >禁用</Button>
                        </div>;
                    case 2:
                        return <div>
                            <Text type={"warning"}>已禁用</Text>
                            <Button
                                className='status-button'
                                size={"small"}
                                type={"primary"}
                                onClick={() => {
                                }}
                            >启用</Button>
                        </div>;
                    default:
                }
            }
        },
        {
            title: '删除',
            render: (item) => (
                <Button
                    type={"danger"}
                    onClick={() => {
                    }}
                >删除</Button>
            )
        }
    ];

    userColumns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username'
        },
        {
            title: '权限等级',
            dataIndex: 'authorization',
            key: 'authorization',
            render: (text) => (text === 0xff ? '管理员' : '用户')
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            key: 'avatar',
            render: (item) => (<img draggable={false} width={24} height={24} src={item} alt={'list-avatar'}/>)
        },
        {
            title: '昵称',
            dataIndex: 'nickname',
            key: 'nickname'
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text) => {
                switch (text) {
                    case 0:
                        return <Text type={"warning"}>未通过</Text>;
                    case 1:
                        return <Text>已通过</Text>;
                    case 2:
                        return <Text type={"danger"}>已禁用</Text>;
                    default:
                }
            }
        },
    ];
    machineColumns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: 'IP',
            dataIndex: 'ip',
            key: 'ip',
        },
        {
            title: 'Memory',
            dataIndex: 'memory',
            key: 'memory',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
    ];

    constructor(props) {
        super(props);

        this.state = {
            data: [
                {
                    id: 1,
                    ip: '139.199.75.187',
                    cpu: '10%',
                    memory: '305MB',
                    bandwidth: '10Mbps',
                    status: 1
                },
                {
                    id: 2,
                    ip: '139.199.75.187',
                    cpu: '10%',
                    memory: '305MB',
                    bandwidth: '10Mbps',
                    status: 2
                },
                {
                    id: 3,
                    ip: '139.199.75.187',
                    cpu: '10%',
                    memory: '305MB',
                    bandwidth: '10Mbps',
                    status: 3
                }
            ],
            modalData: [
                {
                    user_id: 1,
                    user: {
                        username: 'moyrn'
                    },
                    machine_id: 1,
                    machine: {
                        ip: '139.199.75.187'
                    },
                    authorization: 1,
                    status: 1
                },
                {
                    user_id: 2,
                    user: {
                        username: 'moyrn'
                    },
                    machine_id: 1,
                    machine: {
                        ip: '139.199.75.187'
                    },
                    authorization: 1,
                    status: 2
                }
            ],
            visible: false,
            addModalVisible: false,
            user: null,
            users: [],
            selectedUsers: null,
            machines: [],
            selectedMachine: null,
            userModalVisible: false,
            machine: null,
            machineVisible: false,
        };
    }

    rowSelection = {
        type: 'radio',
        onChange: (selectedRowsKey, selectedRows) => {
            this.setState({
                selectedUsers: selectedRows[0],
                userModalVisible: false,
            });
            console.log("rowSelection onChange", selectedRowsKey, selectedRows);
        },
        // getCheckboxProps: (record) => {
        // console.log("rowSelection getCheckboxProps", record);
        // }
    };

    setMachine(item) {
        // window.$http.postForm();
        // console.log("setMachine", item);
        this.setState({visible: true});
    }

    _searchUser(value) {

    }

    _addAuth() {
        console.log("user:", this.state.selectedUsers);
        console.log("machine:", this.state.selectedMachine);


        this.setState({
            selectedUsers: null,
            selectedMachine: null,
            addModalVisible: false,
        })
    }

    render() {
        return (
            <div>
                <Table columns={this.columns} rowKey={record => record.id} dataSource={this.state.data}/>
                {this.state.visible &&
                <Modal width={'100%'} maskClosable={false} footer={null} style={{height:'100%'}}
                       // onOk={() => this.setState({visible: false})}
                       onCancel={() => this.setState({visible: false})}
                       visible={this.state.visible}>
                    <Button type={"primary"} style={{marginBottom: 10}}
                            onClick={() => this.setState({
                                addModalVisible: true,
                                machines: machines,
                            })}
                    ><Icon type={'plus'}/>新增授权</Button>
                    <Search style={{width: 400, float: "right", marginRight: 50}}
                            value={this.state.filterValue} placeholder={'请输入用户名'}
                            enterButton={'查找'} onSearch={value => this._searchUser(value)}/>
                    <Table columns={this.modalColumns} rowKey={record => record.user_id}
                           dataSource={this.state.modalData}/>
                    {this.state.addModalVisible &&
                    <Modal width={'85%'} closable={false}
                           onOk={() => this._addAuth()}
                           onCancel={() => this.setState({
                               addModalVisible: false,
                               machines: []
                           })}
                           visible={this.state.addModalVisible}>
                        <Title level={4}>选择用户</Title>
                        <Search placeholder={'请输入用户名'} enterButton={'搜索'}
                                style={{marginBottom: 10}}
                                onSearch={value => (this.setState({
                                    userModalVisible: true,
                                    users: users
                                }))}/>
                        {this.state.userModalVisible &&
                        <Modal width={'85%'} visible={this.state.userModalVisible} footer={null}
                               onCancel={() => this.setState({
                                   userModalVisible: false,
                                   users: []
                               })}>
                            {/*onOk={() => this.setState({userModalVisible: false})}*/}
                            <Table columns={this.userColumns} rowKey={record => record.id} dataSource={this.state.users}
                                   rowSelection={this.rowSelection}/>
                        </Modal>}
                        {
                            this.state.selectedUsers ?
                                <Descriptions title={'已选用户'} bordered>
                                    <Descriptions.Item label={'ID'}>{this.state.selectedUsers.id}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'用户名'}>{this.state.selectedUsers.username}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'权限'}>{this.state.selectedUsers.authorization}</Descriptions.Item>
                                    <Descriptions.Item label={'头像'}>
                                        <img width={30} height={30} src={this.state.selectedUsers.avatar} alt={'avatar'}
                                             draggable/></Descriptions.Item>
                                    <Descriptions.Item
                                        label={'昵称'}>{this.state.selectedUsers.nickname}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'手机号'}>{this.state.selectedUsers.phone}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'状态'}>{this.state.selectedUsers.status}</Descriptions.Item>
                                </Descriptions> : null
                        }
                        <Title level={4}>选择机器</Title>
                        <Table columns={this.machineColumns} rowKey={record => record.id}
                               dataSource={this.state.machines}
                               rowSelection={{
                                   type: 'radio',
                                   onChange: (selectedRowsKey, selectedRows) => {
                                       this.setState({
                                           selectedMachine: selectedRows[0],
                                       });
                                   },
                               }}/>
                    </Modal>
                    }
                </Modal>
                }
            </div>
        )
    }
}